<template>
  <view class="swippermanage">
    <view class="top">
      <image src="../../static/businessImg/back.png" class="topback" @click="back">
      </image>
      <view class="topname"> 店铺轮播图 </view>
    </view>

    <view class="swippermanagecenter">
      <view class="swippermanagecenterimg">
        <!-- <image :src="lunbopic" style="height: 373rpx;width: 100%;"></image> -->

        <carousel :res="bannerOptions" />
      </view>

      <view class="shangchuanbtn" @click="choosepic"> 上传轮播图 </view>

      <view class="shangchauntext"> 推荐轮播尺寸为673*358PX </view>

      <view class="swippermanagebtn" @click="navigateTo('/pages/business/swipermanagedetail')">
        <span style="padding-left: 14rpx">轮播图管理</span>
        <image class="iconclass2" src="/static/businessImg/righticon.png" width="13rpx" heigth="24rpx"></image>
      </view>

      <!-- <view class="swippermanagecenterimg">
				<image src="../passport/static/logo-title.png"></image>
			</view>

			<view class="shangchuanbtn" @click="choosepic">
				更换顶部图
			</view>
			<view class="shangchauntext">
				推荐顶部尺寸为750*375PX
			</view> -->
    </view>
  </view>
</template>

<script>
import storage from "@/utils/storage.js";
import tpl_banner from "@/pages/tabbar/home/template/tpl_banner";
import { storeBanner, addStoreBanner } from "@/api/storeAdmin.js";
export default {
  data() {
    return {
      lunbopic: "",
      bannerOptions: [],
    };
  },

  components: {
    carousel: tpl_banner,
  },

  onShow() {
    storeBanner({
      id: storage.getUserInfo().storeId,
    }).then((res) => {
      if (res.data.length > 0) {
        let arr = [];

        res.data.forEach((i) => {
          arr.push({
            image: i.image,
          });
        });

        this.bannerOptions = arr;
        this.lunbopic = res.data[0].image;
      } else {
        this.lunbopic = "";
      }
    });
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },

    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },

    choosepic() {
      let that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths[0];
          uni.uploadFile({
            url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
            filePath: filePath,
            name: "file", // 必须填写，后台用来接收文件

            success: function (uploadFileRes) {
              addStoreBanner({
                storeId: storage.getUserInfo().storeId,
                image: JSON.parse(uploadFileRes.data).data,
              }).then((_) => {
                storeBanner({
                  id: storage.getUserInfo().storeId,
                }).then((res) => {
                  if (res.data.length > 0) {
                    that.lunbopic = res.data[0].image;
                  }
                });
              });
            },
            fail: function (uploadFileErr) {
              console.log(uploadFileErr); // 上传失败后的操作
            },
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.swippermanage {
  width: 100%;
  min-height: 100vh;
}

.top {
  width: 100%;
  height: 188rpx;
  position: relative;
  background: #ffffff;
}

.topback {
  width: 16rpx;
  height: 29rpx;
  position: absolute;
  top: 106rpx;
  left: 32rpx;
}

.topname {
  width: 300rpx;
  height: 32rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 33rpx;
  color: #222222;
  line-height: 32rpx;
  position: absolute;
  top: 104rpx;
  left: 50%;
  transform: translateX(-50%);
}

.swippermanagecenter {
  width: 100%;
  padding: 43rpx 23rpx;
}

.swippermanagecenterimg {
  width: 100%;
  height: 373rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.shangchuanbtn {
  width: 307rpx;
  height: 71rpx;
  border-radius: 35rpx;
  text-align: center;
  line-height: 71rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 31rpx;
  color: #ffffff;
  margin: 29rpx auto 16rpx;
  background: rgb(40, 199, 73);
}

.shangchauntext {
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 18rpx;
  color: #898989;
  text-align: center;
  width: 100%;
}

.swippermanagebtn {
  width: 100%;
  height: 75rpx;
  margin: 29rpx auto 89rpx;
  display: flex;
  background: #ffffff;
  justify-content: space-between;
  align-items: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 31rpx;
  color: #000000;
}

.iconclass2 {
  width: 13rpx;
  height: 25rpx;

  padding-right: 14rpx;
}
</style>
